<template>
    <div class="orderListRuleForm">
        <panle title='删人提醒列表' content="删人提醒列表"></panle>

        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="员工" prop="staff_name">
                <el-select v-model="form.label" size="mini" filterable placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.label"
                        :label="item.label"
                        :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="删除时间" prop="del_time">
                <el-date-picker
                    v-model="form.del_time"
                    type="daterange"
                    align="right"
                    size="mini"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
           
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
             
                
            </el-form-item>
        </el-form>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="12" style="color: #FFFFFF">
                    <div>0</div>
                </el-col>
                <el-col :span="10" style="color: #FFFFFF">0</el-col>
                <el-col :span="2">
                    <el-button v-if="state === 0" type="info"  @click="openSaff()" size="mini">删人提醒</el-button>
                    <el-button v-if="state === 1" type="primary"  @click="openSaff()" size="mini">删人提醒</el-button>

                </el-col>
            </el-row>
         
        </div>
        <div class="table-wrap">
            <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                      stripe default-expand-all>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="55"></el-table-column>
                <el-table-column prop="staff_name" label="员工"></el-table-column>
                <el-table-column prop="department" label="所属部门"></el-table-column>
                <el-table-column prop="client_name" label="被删除客户"></el-table-column>
                <el-table-column prop="del_time" label="删除时间"></el-table-column>
               
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                               :page-size="form.pageSize"
                               background layout="total, sizes, prev, pager, next, jumper"
                               :total="form.total"></el-pagination>
            </div>
        </div>
        <el-dialog :visible.sync="open" width="600px" append-to-body :title="!resForm.id ? '设置删除提醒' : '修改欢迎语'">
            <el-form ref="resForm" :model="resForm"  label-width="80px">
                <el-row>

                    <el-col :span="14">
                        <el-form-item label="设置状态" prop="status">
                            <el-radio-group v-model="resForm.status">
                                <el-radio :label="0">禁用</el-radio>
                                <el-radio :label="1">启用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14" v-if="resForm.status === 1">
                        <el-form-item label="设置人员" prop="title">
                            <el-select v-model="resForm.value1" multiple filterable  placeholder="请选择">
                                <el-option
                                    v-for="item in optionsVa"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <el-button type="primary" @click="!resForm.id ? submitForm('resForm') : subEditForm('resForm') " size="small">确 定</el-button>
            </div>

        </el-dialog>

    </div>
    
</template>

<script>
import { getStaffData} from "@/api/scrm/lapsed/lapsed";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {getRemindData, getRemindLossData, getRemindStatusIngormation, sendRemind} from "@/api/scrm/remind/remind";

export default {
    name:'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            options: [],
            value: '',
            open: false,
            tableData: [],
            number:0,
            state:0,
            form: {
                staff_name: '',
                add_time: '',
                day_time: '',
                lapsed_time: '',
                pageSize: 10,
                pageNumber: 1,
                total: 0,
             
            },
            optionsVa: [],
            value1: [],
           
            resForm: {
                "status":0,
                "value1":[]
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            excelFields: {
                "客户 ": "client_name",
                "添加员工": "staff_name",
                "企业标签": "tag_name",
                "流失时间": "lapsed_time",
                "添加时间": "add_time",
                "添加员工时长（天）": "day_time",
              
            }
        }
    },
    created() {
        sessionStorage.removeItem('live-stat')

        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            getRemindData(this.form).then((res) => {
                this.tableData = res.data.list;
                this.form.total = res.data.total;
                this.loading = false;
            })
            getStaffData(this.form).then((res) => {
                this.options = res.data;
            })
            getRemindStatusIngormation(this.form).then((res) => {
                this.state = res.data.status;
            })
          
        },
       
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.form.lapsed_time = ''
            this.form.label = ''
            this.form.day_time = ''
            this.form.add_time = ''
            this.init();
        },
        openSaff: async function() {
            
            const res = await getStaffData();
            this.optionsVa = res.data;
            const des = await getRemindLossData();
            this.resForm.value1 = des.data.send_name;
            this.resForm.status = des.data.status;
            // this.resForm = {
            //     "status": 0,
            //     "value1": [],
            // };
            this.open = true;
        },
        submitForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    sendRemind(this.resForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.open=false;
                            this.init();

                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
      
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}


</style>